<include file="header" />
<script src="{$Think.JS_PATH}imagezoom.js"></script>
<script defer src="{$Think.JS_PATH}jquery.flexslider.js"></script>
<link rel="stylesheet" href="{$Think.CSS_PATH}flexslider.css" type="text/css" media="screen" />

<script type="text/javascript" src="{$Think.JS_PATH}jquery.validate.min.js"></script>
<script>
// Can also be used with $(document).ready()
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });
});
</script>
<script src="{$Think.JS_PATH}easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#horizontalTab').easyResponsiveTabs({
        type: 'default', //Types: default, vertical, accordion
        width: 'auto', //auto or any width like 600px
        fit: true // 100% fit in a container
    });
});
</script>
<div class="men">
    <div class="container">
        <div class="col-md-9 single_top">
            <div class="single_left">
                <div class="labout span_1_of_a1">
                    <?php
                    if($Detail['thumb']){
                        array_unshift($Detail['pictureurls'], array('url'=>$Detail['thumb']));
                    }
                    ?>
                    <div class="carousel slide" id="carousel-604698">
                        <ol class="carousel-indicators">
                            <foreach name="Detail.pictureurls" item="v">
                                <eq name="key" value="1">
                                    <li class="active" data-slide-to="0" data-target="#carousel-604698">
                                    </li>
                                <else />
                                    <li data-slide-to="{$key-1}" data-target="#carousel-604698">
                                    </li>
                                </eq>
                            </foreach>
                        </ol>
                        <div class="carousel-inner">
                            <foreach name="Detail.pictureurls" item="v">
                                <eq name="key" value="1">
                                    <div class="item active">
                                        <img alt="" src="{:thumb($v['url'], 400, 200)}" />
                                    </div>
                                <else />
                                    <div class="item">
                                        <img alt="" src="{:thumb($v['url'], 400, 200)}" width="400" height="200" />
                                    </div>
                                </eq>
                            
                            </foreach>
                        </div> <a class="left carousel-control" href="#carousel-604698" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-604698" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="cont1 span_2_of_a1">
                    <h1>{$Detail.title}</h1>
                    <!--<p class="availability">Availability: <span class="color">In stock</span></p>
                    <div class="price_single">
                        <span class="actual">$70.00-$80.00</span>
                    </div>
                    <h2 class="quick">Quick Overview:</h2>
                    <p class="quick_desc"> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; es</p>
                    <div class="wish-list">
                        <ul>
                            <li class="wish"><a href="#">Add to Wishlist</a></li>
                            <li class="compare"><a href="#">Add to Compare</a></li>
                        </ul>
                    </div>-->
                    <div class="tags">
                        <h5>Category : {$CATEGORYS[$catid]['catname']} </h5>
                        <h5>Email : <a href="mailto:Manager@MetalsExporter.com">Manager@MetalsExporter.com</a> </h5>
                    </div>
                    <!--<div class="quantity_box">
                        <ul class="single_social">
                            <li><a href="#"><i class="fb1"> </i> </a></li>
                            <li><a href="#"><i class="tw1"> </i> </a></li>
                            <li><a href="#"><i class="g1"> </i> </a></li>
                            <li><a href="#"><i class="linked"> </i> </a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>-->
                    <!--<a href="#" title="Online Reservation" class="btn btn-primary btn-normal btn-inline " target="_self">Book</a>-->
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="sap_tabs">
                <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                    <ul class="resp-tabs-list">
                        <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Product Description</span></li>
                        <div class="clear"></div>
                    </ul>
                    <div class="resp-tabs-container">
                        <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                            <div class="facts">
                                <ul class="tab_list" style="overflow: scroll;">
                                    {$Detail.content}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact_form">
            <h2>Leave your message</h2>
            <form method="post" id="feedback">
                <div class="col-md-6 to">
                    <input class="text" type="text" name="title" value="{$Detail.title}" />
                    <input class="text" type="text" name="name" placeholder="Please enter your name!"/>
                    <input class="text" type="text" name="email" placeholder="Please Enter Your Email Address"/>
                    <input class="text" type="text" name="companyName" placeholder="companyName"/>
                    <input class="text" type="text" name="tel" placeholder="Tel" />
                </div>
                <div class="col-md-6 text">
                    <textarea placeholder="Message" name="message"></textarea>
                </div>
                <div class="clearfix"></div>
                <div class="but__center">
                    <input type="submit"  class="submit" value="Inquire Now &gt;&gt;">
                </div>
            </form>
        </div>
        <div class="col-md-3">
            <h3 class="m_1">Related Products</h3>
            <foreach name="pos_category" item="r">
                <ul class="product">
                    <li class="product_img"><img src="{:thumb($r['thumb'],186,186)}" class="img-responsive" alt="" /></li>
                    <li class="product_desc">
                        <h4><a href="{:getUrl($r['catid'], $r['id'])}">{$r['title']}</a></h4>
                        <!--<a href="#" class="link-cart">Add to Wishlist</a>
                    <a href="#" class="link-cart">Add to Cart</a>-->
                    </li>
                    <div class="clearfix"> </div>
                </ul>
            </foreach>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $("#feedback").validate({
            rules: {
                title: "required",
                name: "required",
                tel: {
                    required: true,
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                }
            },
            submitHandler: function(form) {
                $(".submit").attr('disabled', true);
                $(".submit").val('Submitting your inquiry');
                $.ajax({
                    type: 'post',
                    url: '{:U('message')}',
                    data: $("#feedback").serialize(),
                    success: function(data) {
                        if(data.flag){
                            $(".result").show();
                        }else{
                            $(".result").show();
                            console.log(data.msg)
                        }
                        $(".submit").val('Send Success');
                    }
                })
            }
        })
    })
    
</script>
<include file="footer" />